<template>
  <div class="limitdivc">
    <el-form
      :label-position="labelPosition"
      label-width="125px"
      ref="gascostvue"
      class="demo-ruleForm"
      :model="gascostvue"
    >
      <el-row :gutter="20" style="width:100%;">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="燃气费单号">
              <el-input v-model="gascostvue.gascost.gasFId" disabled></el-input>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="业主姓名">
              <el-input v-model="owner_name" disabled></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="width:100%;">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="上次抄表时间">
              <el-date-picker
                class="dateinputc"
                disabled
                v-model="gascostvue.gascost.lastMonthGasTime"
                type="date"
                placeholder="date"
              ></el-date-picker>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="上次抄表度数">
              <el-input v-model="gascostvue.gascost.lastMonthGasCount" disabled>
                <template slot="append">度</template>

              </el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="width:100%;">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="本次抄表时间">
              <el-date-picker
                class="dateinputc"
                disabled
                v-model="gascostvue.gascost.thisMonthGasTime"
                type="date"
                placeholder="date"
              ></el-date-picker>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="本次抄表度数">
              <el-input v-model="gascostvue.gascost.thisMonthGasCount" disabled>
                <template slot="append">度</template>

              </el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="width:100%;">
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-form-item label="本次实际用燃气量">
              <el-input v-model="gascostvue.gascost.useGasCount" disabled>
                <template slot="append">度</template>
              </el-input>
            </el-form-item>
          </div>
        </el-col>

        <!-- <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="燃气费单价">
              <el-input v-model="gascostvue.price" disabled></el-input>
            </el-form-item>
          </div>
        </el-col> -->
      </el-row>

      <!-- <el-row :gutter="20" style="width:100%;">
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-form-item label="本次应缴燃气费">
              <el-input v-model="gascostvue.gascost.totalGasCost" disabled>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row> -->
    </el-form>
    <!-- <el-button class="buttenstylec" type="primary" @click="centerDialogVisible = true" :disabled="isable">确认缴费</el-button> -->

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      :show-close="false"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>尊敬的业主，现在还未到收缴的日期，请在指定日期进行缴纳！</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isable:false,
      dialogVisible: false,
      labelPosition: "right",
      centerDialogVisible: false,
      owner_name: "软件163 ",
      gascostvue: {
        gascost: {
          gasFId: "123", //燃气费id
          lastMonthGasTime: "2020/4/15", //上月抄表时间
          lastMonthGasCount: "80", //（上月燃气表数）
          thisMonthGasTime: "", //本月抄表时间
          thisMonthGasCount: "110", //（本月燃气表数）
          useGasCount: "30", //（实际所用燃气量）
          gasPrice: "1", //水费单价
          totalGasCost: "30" //（总共燃气费）
        },
        price:'',
        bool:""
      }
    };
  },
  methods: {
     handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  },
  created() {
    this.owner_name = sessionStorage.getItem("userName");
    this.ownerId = sessionStorage.getItem("userId");
    this.axios
      .post("cost/showgascost?ownerId=" + this.ownerId)
      .then(res => {
        this.gascostvue.bool = res.data.bool;
        this.gascostvue.gascost=res.data.list[0];
        // this.gascostvue.price=res.data.list[1].price;
        console.log(res.data)
        if(!this.gascostvue.bool){
          this.dialogVisible=true;
          this.isable=true;
        }

      })
      .catch(err => {
        console.error(err);
      });
    // console.log(sessionStorage.getItem("userId"));
  },
  components: {}
};
</script>

<style scope>
.buttenstyle {
  position: relative;
  left: 960px;
}
.inputstyle {
  font-size: 25px;
  outline: none;
  text-align: center; /**居中显示 */
}
.divace {
  border: 1px solid rgb(12, 11, 11);
}
.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px; /**角度圆滑*/
  min-height: 36px; /**高度 */
  text-align: center; /**居中显示 */
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.divcenter {
  /* margin: 0 auto; 
  float:left;
  */
  border: 1px solid #f00;
  width: 50%;
}

.divcontent {
  float: left;
  border: 1px solid rgb(12, 11, 11);
}
</style>
